<template>
	<view class="container">
		<!-- 购物车列表 -->
		<scroll-view 
			scroll-y 
			class="cart-list"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view 
				class="cart-item" 
				v-for="(item, index) in cartList" 
				:key="index"
			>
				<view class="checkbox">
					<checkbox :checked="item.selected" @tap="toggleSelect(index)" />
				</view>
				<image :src="item.image" mode="aspectFill" class="product-img" @tap="navigateToDetail(item.id)"></image>
				<view class="product-info">
					<text class="name">{{item.name}}</text>
					<text class="specs">{{item.specs}}</text>
					<view class="bottom">
						<text class="price">¥{{item.price}}</text>
						<view class="quantity-control">
							<text class="minus" @tap="decreaseQuantity(index)">-</text>
							<input type="number" v-model="item.quantity" class="quantity-input" @blur="validateQuantity(index)" />
							<text class="plus" @tap="increaseQuantity(index)">+</text>
						</view>
					</view>
				</view>
				<view class="delete-btn" @tap="deleteItem(index)">
					<text class="icon">×</text>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="cartList.length === 0">
				<image src="/static/images/empty.png" mode="aspectFit" class="empty-img"></image>
				<text class="empty-text">购物车是空的</text>
				<button class="go-shopping" @tap="navigateToIndex">去逛逛</button>
			</view>
		</scroll-view>
		
		<!-- 底部结算栏 -->
		<view class="bottom-bar" v-if="cartList.length > 0">
			<view class="select-all">
				<checkbox :checked="isAllSelected" @tap="toggleSelectAll" />
				<text>全选</text>
			</view>
			<view class="total-info">
				<view class="total-price">
					<text>合计：</text>
					<text class="price">¥{{totalPrice}}</text>
				</view>
				<view class="total-desc">不含运费</view>
			</view>
			<button class="checkout-btn" @tap="checkout">结算({{selectedCount}})</button>
		</view>
		
		<!-- 规格选择弹窗 -->
		<uni-popup ref="specsPopup" type="bottom">
			<view class="specs-popup">
				<view class="popup-header">
					<image :src="currentProduct.image" mode="aspectFill" class="popup-image"></image>
					<view class="popup-info">
						<view class="popup-price">¥{{currentProduct.price}}</view>
						<view class="popup-stock">库存：{{currentProduct.stock}}件</view>
					</view>
					<text class="close-btn" @tap="closeSpecsPopup">×</text>
				</view>
				<view class="popup-content">
					<view class="specs-title">规格</view>
					<view class="specs-list">
						<view 
							class="specs-item" 
							v-for="(item, index) in currentProduct.specs" 
							:key="index"
							:class="{ active: selectedSpecs === item }"
							@tap="selectSpecs(item)"
						>
							{{item}}
						</view>
					</view>
					<view class="quantity-section">
						<text>数量</text>
						<view class="quantity-control">
							<text class="minus" @tap="decreasePopupQuantity">-</text>
							<input type="number" v-model="popupQuantity" class="quantity-input" />
							<text class="plus" @tap="increasePopupQuantity">+</text>
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<button class="confirm-btn" @tap="confirmSpecs">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 购物车列表
const cartList = ref([
	{
		id: '10001',
		name: '重庆老火锅底料',
		price: '39.90',
		image: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1nx2Xh2Z9tP_!!6000000005155-0-tps-1316-736.jpg',
		specs: '500g',
		quantity: 1,
		selected: true,
		stock: 1000
	},
	{
		id: '10002',
		name: '麻辣牛肉',
		price: '68.00',
		image: 'https://img.alicdn.com/imgextra/i2/O1CN01F0MA5j1zXb0XcYV1F_!!6000000006733-0-tps-1316-736.jpg',
		specs: '500g',
		quantity: 2,
		selected: true,
		stock: 500
	}
])

// 是否正在刷新
const isRefreshing = ref(false)

// 是否还有更多数据
const hasMore = ref(false)

// 当前编辑的商品
const currentProduct = ref({})
// 选中的规格
const selectedSpecs = ref('')
// 弹窗中的数量
const popupQuantity = ref(1)

// 是否全选
const isAllSelected = computed(() => {
	return cartList.value.length > 0 && cartList.value.every(item => item.selected)
})

// 选中的商品数量
const selectedCount = computed(() => {
	return cartList.value.filter(item => item.selected).length
})

// 总价
const totalPrice = computed(() => {
	return cartList.value
		.filter(item => item.selected)
		.reduce((total, item) => {
			return total + Number(item.price) * item.quantity
		}, 0)
		.toFixed(2)
})

// 切换商品选中状态
const toggleSelect = (index) => {
	cartList.value[index].selected = !cartList.value[index].selected
}

// 切换全选状态
const toggleSelectAll = () => {
	const newStatus = !isAllSelected.value
	cartList.value.forEach(item => {
		item.selected = newStatus
	})
}

// 增加商品数量
const increaseQuantity = (index) => {
	const item = cartList.value[index]
	if (item.quantity < item.stock) {
		item.quantity++
	}
}

// 减少商品数量
const decreaseQuantity = (index) => {
	const item = cartList.value[index]
	if (item.quantity > 1) {
		item.quantity--
	}
}

// 验证商品数量
const validateQuantity = (index) => {
	const item = cartList.value[index]
	let quantity = parseInt(item.quantity)
	if (isNaN(quantity) || quantity < 1) {
		quantity = 1
	} else if (quantity > item.stock) {
		quantity = item.stock
	}
	item.quantity = quantity
}

// 删除商品
const deleteItem = (index) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除这个商品吗？',
		success: (res) => {
			if (res.confirm) {
				cartList.value.splice(index, 1)
			}
		}
	})
}

// 加载更多
const loadMore = () => {
	if (!hasMore.value) return
	// 这里可以添加加载更多购物车商品的逻辑
}

// 下拉刷新
const onRefresh = () => {
	isRefreshing.value = true
	// 这里可以添加刷新购物车列表的逻辑
	setTimeout(() => {
		isRefreshing.value = false
	}, 1000)
}

// 跳转到商品详情
const navigateToDetail = (id) => {
	uni.navigateTo({
		url: `/pages/detail/view?id=${id}`
	})
}

// 跳转到首页
const navigateToIndex = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}

// 显示规格选择弹窗
const showSpecsPopup = (product) => {
	currentProduct.value = product
	selectedSpecs.value = product.specs
	popupQuantity.value = product.quantity
	// 这里需要引入uni-popup组件
	uni.showToast({
		title: '请先安装uni-popup组件',
		icon: 'none'
	})
}

// 关闭规格选择弹窗
const closeSpecsPopup = () => {
	// 这里需要引入uni-popup组件
}

// 选择规格
const selectSpecs = (spec) => {
	selectedSpecs.value = spec
}

// 增加弹窗中的数量
const increasePopupQuantity = () => {
	if (popupQuantity.value < currentProduct.value.stock) {
		popupQuantity.value++
	}
}

// 减少弹窗中的数量
const decreasePopupQuantity = () => {
	if (popupQuantity.value > 1) {
		popupQuantity.value--
	}
}

// 确认规格选择
const confirmSpecs = () => {
	if (!selectedSpecs.value) {
		uni.showToast({
			title: '请选择规格',
			icon: 'none'
		})
		return
	}
	
	// 更新商品规格和数量
	const index = cartList.value.findIndex(item => item.id === currentProduct.value.id)
	if (index > -1) {
		cartList.value[index].specs = selectedSpecs.value
		cartList.value[index].quantity = popupQuantity.value
	}
	
	closeSpecsPopup()
}

// 结算
const checkout = () => {
	if (selectedCount.value === 0) {
		uni.showToast({
			title: '请选择要结算的商品',
			icon: 'none'
		})
		return
	}
	
	// 检查商品库存
	const selectedItems = cartList.value.filter(item => item.selected)
	for (const item of selectedItems) {
		if (item.quantity > item.stock) {
			uni.showToast({
				title: `${item.name}库存不足`,
				icon: 'none'
			})
			return
		}
	}
	
	// 计算选中商品的总价
	const totalAmount = selectedItems.reduce((total, item) => {
		return total + Number(item.price) * item.quantity
	}, 0).toFixed(2)
	
	// 跳转到确认订单页面，并传递商品数据
	uni.navigateTo({
		url: `/pages/order/confirm?items=${encodeURIComponent(JSON.stringify(selectedItems))}&totalAmount=${totalAmount}`
	})
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 100rpx;
}

/* 购物车列表样式 */
.cart-list {
	height: calc(100vh - 100rpx);
}

.cart-item {
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.checkbox {
	margin-right: 20rpx;
}

.product-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.specs {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price {
	font-size: 32rpx;
	color: #D02B29;
	font-weight: bold;
}

.quantity-control {
	display: flex;
	align-items: center;
}

.minus, .plus {
	width: 60rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-color: #F5F5F5;
	border-radius: 30rpx;
}

.quantity-input {
	width: 100rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	margin: 0 20rpx;
}

.delete-btn {
	padding: 20rpx;
}

.delete-btn .icon {
	font-size: 40rpx;
	color: #999;
}

/* 底部结算栏样式 */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	border-top: 1rpx solid #EEEEEE;
}

.select-all {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.select-all text {
	font-size: 28rpx;
	color: #333;
	margin-left: 10rpx;
}

.total-info {
	flex: 1;
}

.total-price {
	font-size: 28rpx;
	color: #333;
}

.total-price .price {
	font-size: 36rpx;
}

.total-desc {
	font-size: 24rpx;
	color: #999;
}

.checkout-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
	margin-left: 20rpx;
}

/* 空状态样式 */
.empty-state {
	padding: 100rpx 0;
	text-align: center;
}

.empty-img {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 30rpx;
	display: block;
}

.go-shopping {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
}

/* 规格选择弹窗样式 */
.specs-popup {
	background-color: #FFFFFF;
	border-radius: 20rpx 20rpx 0 0;
}

.popup-header {
	display: flex;
	padding: 20rpx;
	position: relative;
}

.popup-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.popup-info {
	flex: 1;
}

.popup-price {
	font-size: 36rpx;
	color: #D02B29;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.popup-stock {
	font-size: 24rpx;
	color: #999;
}

.close-btn {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	font-size: 40rpx;
	color: #999;
}

.popup-content {
	padding: 20rpx;
}

.specs-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.specs-list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30rpx;
}

.specs-item {
	padding: 10rpx 30rpx;
	border: 1rpx solid #DDDDDD;
	border-radius: 30rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	font-size: 26rpx;
	color: #666;
}

.specs-item.active {
	background-color: #FFF5F5;
	border-color: #D02B29;
	color: #D02B29;
}

.quantity-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.popup-footer {
	padding: 20rpx;
}

.confirm-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
}
</style> 